document.addEventListener('DOMContentLoaded', function() {
    // 获取所有“加入购物车”按钮
    const addToCartButtons = document.querySelectorAll('.j_car');

    // 为每个按钮添加点击事件监听器
    addToCartButtons.forEach(function(button) {
        button.addEventListener('click', function(event) {
            event.preventDefault(); // 阻止默认的链接跳转行为

            // 获取商品信息
            const productItem = this.closest('li');
            const productName = productItem.querySelector('.name a').textContent;
            const productPriceText = productItem.querySelector('.price span').textContent;
            const productPrice = parseFloat(productPriceText.replace('￥', ''));
            const productImage = productItem.querySelector('.img img').src;

            // 将商品信息添加到购物车
            addProductToCart(productName, productPrice, productImage);
        });
    });

    // 添加商品到购物车的函数
    function addProductToCart(name, price, image) {
        // 获取购物车列表容器
        const cartList = document.querySelector('.order_content');

        // 创建新的商品列表项
        const newItem = document.createElement('ul');
        newItem.classList.add('order_lists');

        // 创建复选框
        const checkboxLi = document.createElement('li');
        checkboxLi.classList.add('list_chk');
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.classList.add('son_check');
        checkboxLi.appendChild(checkbox);
        newItem.appendChild(checkboxLi);

        // 创建商品图片和名称
        const contentLi = document.createElement('li');
        contentLi.classList.add('list_con');
        const imgDiv = document.createElement('div');
        imgDiv.classList.add('list_img');
        const img = document.createElement('img');
        img.src = image;
        imgDiv.appendChild(img);
        const textDiv = document.createElement('div');
        textDiv.classList.add('list_text');
        const textLink = document.createElement('a');
        textLink.href = '#';
        textLink.textContent = name;
        textDiv.appendChild(textLink);
        contentLi.appendChild(imgDiv);
        contentLi.appendChild(textDiv);
        newItem.appendChild(contentLi);

        // 创建商品价格
        const priceLi = document.createElement('li');
        priceLi.classList.add('list_price');
        const priceP = document.createElement('p');
        priceP.classList.add('price');
        priceP.textContent = `￥${price.toFixed(2)}`;
        priceLi.appendChild(priceP);
        newItem.appendChild(priceLi);

        // 创建商品数量（默认为 1）
        const amountLi = document.createElement('li');
        amountLi.classList.add('list_amount');
        const amountBox = document.createElement('div');
        amountBox.classList.add('amount_box');
        const minusButton = document.createElement('a');
        minusButton.href = '#';
        minusButton.classList.add('reduce');
        minusButton.textContent = '-';
        const amountInput = document.createElement('input');
        amountInput.type = 'text';
        amountInput.value = '1';
        amountInput.classList.add('itxt');
        const plusButton = document.createElement('a');
        plusButton.href = '#';
        plusButton.classList.add('add');
        plusButton.textContent = '+';
        amountBox.appendChild(minusButton);
        amountBox.appendChild(amountInput);
        amountBox.appendChild(plusButton);
        amountLi.appendChild(amountBox);
        newItem.appendChild(amountLi);

        // 创建商品小计
        const sumLi = document.createElement('li');
        sumLi.classList.add('list_sum');
        const sumP = document.createElement('p');
        sumP.classList.add('sum_price');
        sumP.textContent = `￥${price.toFixed(2)}`;
        sumLi.appendChild(sumP);
        newItem.appendChild(sumLi);

        // 创建删除按钮
        const opLi = document.createElement('li');
        opLi.classList.add('list_op');
        const delP = document.createElement('p');
        delP.classList.add('del');
        const delLink = document.createElement('a');
        delLink.href = '#';
        delLink.classList.add('delBtn');
        delLink.textContent = '移除商品';
        delP.appendChild(delLink);
        opLi.appendChild(delP);
        newItem.appendChild(opLi);

        // 将新商品项添加到购物车列表中
        cartList.appendChild(newItem);

        // 更新购物车总价
        updateTotalPrice();
    }

    // 更新购物车总价的函数
    function updateTotalPrice() {
        let totalPrice = 0;
        const sumPrices = document.querySelectorAll('.sum_price');

        // 遍历所有商品的小计价格并累加
        sumPrices.forEach(function(priceElement) {
            const priceText = priceElement.textContent.replace('￥', '');
            const price = parseFloat(priceText);
            totalPrice += price;
        });

        // 更新页面上显示的总价
        const totalPriceElement = document.getElementById('amount_1').querySelector('h2');
        totalPriceElement.textContent = `合计:￥${totalPrice.toFixed(2)}`;
    }
});